<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/texts.js"></script>

<script type="text/javascript" src="../tshirt/js/tshirt.js"></script>

<script type="text/javascript"
	src="../grid/js/controllers/controller-grid.js"></script>
<script type="text/javascript" src="../grid/js/views/view-grid.js"></script>

<link href='http://fonts.googleapis.com/css?family=Yesteryear'
	rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Henny+Penny'
	rel='stylesheet' type='text/css'>
<link href='../bootstrap/css/bootstrap.css' rel='stylesheet'
	type='text/css'>

<script type="text/javascript">


function insertText() {
	var text = $("#inputText").val();
	var size = $("#inputSize").val();
	var font = $("#inputFont").val();

	
	if(isEmpty(size)){
		size = 50;
		}

	addText(100, 100, text, '#003300', size+'px '+font, 'bottom',
			true);	
	
}

function isEmpty(obj) {
    if (typeof obj == 'undefined' || obj === null || obj === '') return true;
    if (typeof obj == 'number' && isNaN(obj)) return true;
    if (obj instanceof Date && isNaN(Number(obj))) return true;
    return false;
}
		
</script>


</head>
<body onload="initcomponents({root:'graph'});drawImage();">

	<div style="position: relative;">
		<canvas id="grid" width="600" height="600"
			style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
		<canvas id="tshirt" width="600" height="600" ondrop="drop(event)"
			ondragover="allowDrop(event)"
			style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
		<canvas id="graph" width="600" height="600" ondrop="drop(event)"
			ondragover="allowDrop(event)"
			style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
	</div>
	<div
		style="float: left; margin-left: 600px; background: #EEEEEE; height: 600px; width: 250px;">

		<div class="control-group">
			<label class="control-label" for="inputText">Text</label>
			<div class="controls">
				<input type="text" id="inputText" placeholder="Text">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="inputSize">Size</label>
			<div class="controls">
				<input type="text" id="inputSize" placeholder="50">
			</div>
		</div>


		<div class="control-group">
			<label class="control-label" for="inputSize">Font</label> <select
				id="inputFont">
				<option>Yesteryear</option>
				<option>Henny Penny</option>
			</select>
		</div>



		<button id="insertButton" class="btn btn-primary" type="button"
			onclick="insertText();">Insert</button>

	</div>



</body>
</html>